<template>
	<layout>
		<view>
			<u-navbar title="提现记录" :background="{backgroundImage: 'linear-gradient(to right, #434AD8, #8E77F5)'}" :borderBottom="false"
			 titleColor="#fff" backIconColor="#fff"></u-navbar>
			<view v-if="list.length">
				<uni-list>
					<uni-list-item v-for="(item, index) in list" @click="handleItemClick(item)" :key="item.id" :title="(item.fee / 100) + '元'"
					 :note="formatTime(item.createTime)">
						<template v-slot:right="">
							<text :style="{color: withdrawStatus[item.status].color}">{{withdrawStatus[item.status].label}}</text>
						</template>
					</uni-list-item>
				</uni-list>
				<uni-load-more :status="loadingStatus"></uni-load-more>
			</view>
			<view v-else class="pad-base">
				<u-empty></u-empty>
			</view>
			<uni-popup ref="popup">
				<view class="simple-card round-corner">
					<view v-if="selectedItem">
						<view class="uni-flex uni-column" v-if="selectedItem.status === 'REJECTED'">
							<text class="uni-bold">已驳回</text>
							<text>原因：{{selectedItem.auditMsg || '-'}}</text>
						</view>
						<view class="uni-flex uni-column" v-else-if="selectedItem.status === 'WAITING'">
							<text>审核中，请等待。。。</text>
						</view>
						<view v-else class="uni-flex uni-column">
							<text class="uni-bold">已通过</text>
							<text>通过审核，平台已打款，请留言微信通知！</text>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</layout>
</template>

<script>
	import {
		withdrawStatus
	} from "../../common/constants.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				list: [],
				loadingStatus: "noMore",
				pageNum: 0,
				pageSize: 20,
				withdrawStatus,
				selectedItem: null
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		onReady() {
			this.reload();
		},
		async onPullDownRefresh() {
			await this.reload();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			formatTime(time) {
				return this.$formatTime(time);
			},
			handleItemClick(item) {
				this.selectedItem = item;
				this.$refs.popup.open();
			},
			async reload() {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "more";
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try {
					let res = await this.$dbHelper.getPage("t3ds-withdraw-apply", {
						pageNum: this.pageNum + 1,
						pageSize: this.pageSize,
						where: `userId == '${this.userInfo._id}'`,
						orderBy: 'createTime desc'
					});
					if (res.list.length) {
						this.list = this.list.concat(res.list);
						this.pageNum += 1;
					}
					if (this.list.length < res.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				} catch (e) {
					this.$log("获取会员提现列表遇到错误", e);
					this.loadingStatus = prevStatus;
				}
			}
		}
	}
</script>

<style>

</style>
